<template>
  <div id="give">
    <!--搜索-->
    <div class="search-content">
      <el-input v-model="givenName" placeholder="赠送方昵称查询" style="width: 240px"  prefix-icon="el-icon-search" clearable @change="inquiryList"/>
      <el-input v-model="receiveName" placeholder="接收方昵称查询" style="width: 240px" prefix-icon="el-icon-search" clearable  @change="inquiryList"/>
      <el-date-picker
        v-model="dateTimeRange"
        type="datetimerange"
        range-separator="至"
        clearable
        value-format="yyyy-MM-dd HH-mm-ss"
        @change="inquiryList"
        :picker-options="pickerOptions"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="赠送方昵称" prop="fromMember" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.fromMember">{{scope.row.fromMember.name}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="赠送方用户名" prop="fromMember" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.fromMember">{{scope.row.fromMember.userName}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="接收方昵称" prop="toMember" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.toMember">{{scope.row.toMember.name}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="接收方用户名" prop="toMember" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.toMember">{{scope.row.toMember.userName}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="表情图片" prop="expressions" align="center">
          <template slot-scope="scope">
            <img v-if='scope.row.expressions' width="50" height='50' :src="scope.row.expressions.httpPath" alt="头像有误"/>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="花费金币数" prop="price" align="center"/>
        <el-table-column label="赠送时间" prop="createDate" width="170" align="center"/>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import {Message} from 'element-ui';
  import request from "../../utils/request";

  export default {
    name: "ExpressionGiveList",
    data() {
      return {
        // 查询
        givenName: "",
        receiveName: '',
        dateTimeRange: [],
        pickerOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                const end = new Date();
                const start = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 0, 0, 0);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '本月',
              onClick(picker) {
                const end = new Date();
                const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '上月',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
                let start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
                let end = new Date(new Date().getFullYear(), new Date().getMonth(), 1, 23, 59, 59);
                end.setTime(end.getTime() - 3600 * 24 * 1000);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }
          ]
        },
        isClearable: true,
        // 列表数据
        tableData: [],
        //赠送方、接收方详情
        giveDialogVisible: false,
        DetailData: {},
        //礼物详情
        giftDialogVisible: false,
        giftDetailData: {},
        //分页
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    },
    mounted() {
      this.inquiryList();
    },
    methods: {
      isNotNull(value) {
        return value !== null && value !== undefined && value !== "";
      },
      //查询列表
      inquiryList() {
        let that = this;
        that.tableData = [];
        let data = {
          pageNumber: that.currentPage,
          pageSize: that.pageSize,
          filters: []
        };
        if (that.isNotNull(that.givenName)) { //赠送方昵称
          data.filters.push({
            property: "f.name",
            value: that.givenName,
            operator: "eq"
          })
        }
        if (that.isNotNull(that.receiveName)) { //接收方昵称
          data.filters.push({
            property: "t.name",
            value: that.receiveName,
            operator: "eq"
          })
        }
        if (this.isNotNull(that.dateTimeRange)) { //赠送时间范围
          data.filters.push({
            property: "mg.time",
            value: that.dateTimeRange[0],
            operator: "ge"
          });
          data.filters.push({
            property: "mg.time",
            value: that.dateTimeRange[1],
            operator: "le"
          })
        }
        request({
          method: 'post',
          url: 'admin/member/expression/list',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data: data
        }).then(function (res) {
          if (res.code === 200) {
            that.total = res.data.total;
            let arr = res.data.records;
            if (arr.length === 0) {
              that.tableData = [];
            } else {
              that.tableData = arr
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      // 改变每页显示的数量
      handleSizeChange(val) {
        this.pageSize = val;
        this.inquiryList();
      },
      //改变当前页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.inquiryList();
      }
    }
  }
</script>

<style src="../../assets/css/giftManagement/giveList.css">

</style>
